<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcss.com/element-ui/2.15.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

<!--    <script src="/js/axios.min.js"></script>-->

</head>
<body id = "body">
<div  id="app" v-loading="loading">
    <el-card style="margin: 1%">
        <el-form style="margin-top: 10px">
            <el-row gutter="24" type="flex" align="middle" >
                <el-col :span = 4>
                    <el-form-item label="方案名称" >
                        <el-input v-model="project.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span = 12>
                    <el-form-item label="方案描述" >
                        <el-input v-model="project.describe"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
    <!-------------------------------drawer 存储过程获取产品列表 ----------------------up ------------------->
    <el-card style="margin-top: 10px;margin-left: 2%;margin-right:2%">
        <el-form>
            <el-row gutter="24" type="flex" align="middle" >
                <el-col :span = 2>
                    <el-form-item label="序号" >
                    </el-form-item>
                </el-col>
                <el-col :span = 4>
                    <el-form-item label="标题名称" >
                    </el-form-item>
                </el-col>
                <el-col :span = 16>
                    <el-form-item label="标题描述" >
                    </el-form-item>
                </el-col>
                <el-col :span = 4>
                    <el-form-item label="操作" >
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row gutter="24" type="flex" align="middle" v-for="(item,index) in projectTitles" style="margin-top: 10px">
                <el-col :span = 1>
                    {{index}}
                </el-col>
                <el-col :span = 4>
                    <el-input v-model="item.name"></el-input>
                </el-col>
                <el-col :span = 16>
                    <el-input v-model="item.describe"></el-input>
                </el-col>
                <el-col :span = 4>
                    <el-button type="primary" size="mini" @click="projectTitles.splice(index+1,0,{})">插入</el-button>
                    <el-button type="danger" size="mini" @click="projectTitles.splice(index,1)" v-if="projectTitles.length != 1">删除</el-button>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
    <el-card  style="margin-top: 10px;margin-left: 2%;margin-right:2%;margin-bottom: 100px">
        <el-form>
            <el-row gutter="24" type="flex" align="middle" >
                <el-col :span = 2>
                    <el-form-item label="序号" >
                    </el-form-item>
                </el-col>
                <el-col :span = 4>
                    <el-form-item label="测试项目" >
                    </el-form-item>
                </el-col>
                <el-col :span = 8>
                    <el-form-item label="规格" >
                    </el-form-item>
                </el-col>
                <el-col :span = 4>
                    <el-form-item label="操作" >
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row gutter="24" type="flex" align="middle" v-for="(item,index) in projectEntitys" style="margin-top: 10px">
                <el-col :span = 1>
                    {{index}}
                </el-col>
                <el-col :span = 4>
                    <el-input v-model="item.name"></el-input>
                </el-col>
                <el-col :span = 12>
                    <el-input v-model="item.specs"></el-input>
                </el-col>
                <el-col :span = 4>
                    <el-button type="primary" size="mini" @click="projectEntitys.splice(index+1,0,{})">插入</el-button>
                    <el-button type="danger" size="mini" @click="projectEntitys.splice(index,1)" v-if="projectEntitys.length != 1">删除</el-button>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
    <el-card>
        <div style="float: right;padding: 10px">
            <el-button type="success" @click="save">保存</el-button>
        </div>
    </el-card>

</div>

</body>

<script>
    new Vue({
        el: '#app',
        created(){
            //设置全局的
            var instance = axios.create({
                timeout: 20000,
                //headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
                headers: {'Content-Type': 'application/json;charset=utf-8'}
            });
            this.$axios = instance;
            let id = this.getUrlKey('id');
            if(id){
                this.getProject(id);
            }

        },
        mounted(){
        },
        beforeDestroy() {

        },
        data() {
            return {
                $axios:{},
                query:{
                    index:0,
                    size:10,
                    name:'',
                },
                loading:false,
                project:{},
                projectTitles:[{},{}],
                projectEntitys:[{},{}]
            }
        },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val
            },

/******************************************数据格式化formater down*******************************************/
            peAdd(ind) {
                this.projectEntitys.splice(ind,{})
            },


/******************************************数据格式化formater up*******************************************/


/******************************************请求 down*******************************************/
            save(){
                let there = this;
                if(!this.project.name){
                    this.error("方案名称不能为空");
                    return;
                }
                if(!this.project.describe){
                    this.error("方案描述不能为空");
                    return;
                }
                let data = {name:this.project.name,describe:this.project.describe}
                if(this.project.id){
                    data.id = this.project.id
                }
                let titles = [];
                console.log(this.projectTitles)
                for(let item of this.projectTitles){
                    if(item.name || item.describe){
                        let ent = {};
                        ent.orderNumber = titles.length;
                        ent.name = item.name;
                        ent.describe = item.describe;
                        titles.push(ent);
                    }
                }
                let entitys = [];
                for(let item of this.projectEntitys){
                    if(item.name || item.specs){
                        let ent = {};
                        ent.orderNumber = entitys.length;
                        ent.name = item.name;
                        ent.specs = item.specs;
                        entitys.push(ent);
                    }
                }
                if(titles.length == 0){
                    this.error("标题不能为空");
                    return;
                }
                if(entitys.length == 0){
                    this.error("测试项目不能为空");
                    return;
                }
                data.tiltles = titles;
                data.entitys = entitys;
                console.log((data));
                this.post('/project/save',data,function (res) {
                    if(200 === res.code){
                        there.success(res.message);
                        window.location.href='/main'
                        //setTimeout(window.location.href='/main',3);
                    }
                })
            },
            getProject(id){
                let there = this;
                this.get('/project/get?id='+id,function (res) {
                    if(200 === res.code){
                        there.project = res.data.data;
                        there.projectEntitys = res.data.data.entitys;
                        there.projectTitles = res.data.data.tiltles;
                    }else {
                        there.error(res.message);
                        setTimeout(window.location.href='/main',3);
                    }
                })
            },
            post(url,data,callback){
                this.loading = true;
                let there = this;
                this.$axios.post(url,JSON.stringify(data)).then(function (res) {
                    callback(res.data)
                    there.loading = false;
                }).catch(function (err) {
                    there.loading = false;
                    there.error(err)
                });
            },
            get(url,callback) {
                this.loading = true;
                let there = this;
                this.$axios.get(url).then(function (res) {
                    callback(res.data)
                    there.loading = false;
                }).catch(function (err) {
                    console.log(err);
                    there.loading = false;
                    there.error(err)
                });

            },
            error(mes){
                this.$message({
                    message: mes,
                    type: 'error'
                });
            },
            success(mes){
                this.$message({
                    message: mes,
                    type: 'success'
                });
            },
            add(){
                window.location.href='/add';
            },
            getUrlKey: function (name) {
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
            }
        },
        computed(){
        }
    })
</script>
<style>
    #body {
        margin: 0;
        padding: 0;
        background-color: #f2f2f2;
    }
    .c_head{
        background-color: #ffffff;
    }
    .c_header_left{
        float: left;
    }
    .c_header_right{
        float: right;
        margin: 10px;
    }
    .el-menu-item{
        font-weight: bold;
    }
    .c_menu_item{
        font-size: 35px;
        margin-left: 50px;
        margin-right: 50px;
    }
    .c_form_btn{
        float: right;
        margin-right: 50px;
    }
    .c_form{
        margin-bottom: 50px;
    }
    .handle-box {
        margin: 20px;
    }
    .handle-input {
        margin: 10px;
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
</style>
</html>